<script setup>
import Order_item from "../pages/order/order_item.vue";
import Order_item_gf from "../pages/order/order_item_gf.vue";
import Order_modal from "../pages/order/order_modal.vue";
import XtxService from "../components/XtxService.vue";
import XtxEmpty from "../components/XtxEmpty.vue";
import {getBuToPagePath, getToPagePath} from "../utils/utils";
import {BaseImgUrl} from "../utils/lshttp";
import CacheImage from "../components/CacheImage.vue";
import {useOrder} from "../pages/order/use_order";

const {
  paging,
  dataList,
  tabsList,
  modal_title,
  comment_rule,
  listID,
  order_con,
  minTime,
  modal_show,
  showSelect,
  showEwm,
  showCopy,
  isH5,
  isNoShow,
  shop,
  chooseList,
  count,
  isRefresh,
  recoveryShow,
  currentNum, // tab 切换时，当前tab索引
  activeMorenIndex, // 关闭更多按钮索引
  closePop,
  tabChange,
  handleLaunch,
  handleError,
  itemResume,
  handleResumeOrder,
  handleUpload,
  handleUploadOrderNo,
  handleSaveUserPayOrderNo,
  handleTwoOrder,
  reasonForrejection,
  cancelOrder,
  queryList,
  goShop,
  goMeiTuanSearch,
  onChooseList,
  onClickIsNoShow,
  cancelGFOrder,
  goGFShop,
  queryGfState,
  onRefresh,
  oneKeyCuiShenFun, // 一键审核
  closeMore, // 隐藏更多按钮
  setMore, //点击更多按钮
} = useOrder()

// 返回上个页面
const okBack = () => {
  uni.switchTab( {
    url: '/pages/me/me'
  })
}
</script>

<template>
  <z-paging ref="paging" v-model="dataList"
            @query="queryList"
            @onRefresh="onRefresh"
            :auto-hide-loading-after-first-loaded="false">
    <template #top>
      <!-- #ifdef MP -->
      <u-navbar
          title="我的订单"
          placeholder
          titleStyle="color:black"
          leftIcon="arrow-left"
          leftIconColor="#303133"
          @leftClick="okBack"
          :autoBack="true"
          :border="true"
      >
      </u-navbar>
      <!--#endif-->
      <!--#ifdef H5 || APP-PLUS-->
      <!--<u-status-bar></u-status-bar>-->
      <u-navbar
          title="我的订单"
          placeholder
          titleStyle="color:black"
          leftIcon="arrow-left"
          leftIconColor="#303133"
          @leftClick="okBack"
          :autoBack="true"
          :border="true"
      >
      </u-navbar>
      <!--#endif-->
      <view class="tabs">
        <!--        <view style="color: white; height: 100rpx"></view>-->
        <u-tabs
            :scrollable="true"
            @change="tabChange"
            :list="tabsList"
            :current="currentNum"
            lineColor="#FF7900"
            lineWidth="20"
            lineHeight="4"
            :activeStyle="{
            color: '#000000',
            // padding: '10rpx 36rpx',
            // marginRight: '28rpx',
            // marginLeft: '10rpx',
            borderRadius: '30rpx',
            fontWeight: 'bold',
            // background: '#fbde50',
            fontSize: '26rpx',
            transition: 'all 0.3s',
          }"
            :inactiveStyle="{
            color: '#888888',
            fontSize: '26rpx',
            // marginRight: '28rpx',
            // marginLeft: '10rpx',
            transition: 'all 0.3s',
          }"
            itemStyle="width: 25%;height:80rpx;"
        >
        </u-tabs>
      </view>
    </template>
    <view @tap="closeMore" class="notice_box" v-if="dataList.length > 0">
      <image src="https://lsz.lszbg.com/imgs/old/notice_icon.png"></image>
      <text class="desc_text">
        温馨提示：需在规定时间内保存订单号延长上传凭证的时间，超时报名作废，活动失效；切勿恶意占用名额，多次违规将封号处理，永不解封。
      </text>
    </view>

    <!--订单列表  -->
    <view @tap="closeMore" class="orderTotal">
      <view v-for="(item, index) in dataList" :key="index" class="orderList">
        <order_item v-if="item.order_type == 1" :item="item" :orderIndex="index" source="meOrder" :activeMorenIndex="activeMorenIndex"
                    @handleResumeOrder="handleResumeOrder"
                    @handleTwoOrder="handleTwoOrder"
                    @handleUpload="handleUpload"
                    @cancelOrder="cancelOrder"
                    @handleUploadOrderNo="handleUploadOrderNo"
                    @goShop="goShop"
                    @reasonForrejection="reasonForrejection"
                    @handleSaveUserPayOrderNo="handleSaveUserPayOrderNo"
                    @oneKeyCuiShenFun="oneKeyCuiShenFun"
                    @setMore="setMore"
        ></order_item>
        <order_item_gf v-else :item="item" :activeMorenIndex="activeMorenIndex"
                    @cancelGFOrder="cancelGFOrder"
                    @goGFShop="goGFShop"
                    @queryGfState="queryGfState"
                    @setMore="setMore"
        ></order_item_gf>
      </view>
    </view>

    <template #refresher>
      <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
      <view style="display: flex;justify-content: center;align-items: center;padding-top: 120rpx;">
        <cache-image style="width: 110rpx;height: 110rpx;margin: auto"
                     img-src="https://lsz.lszbg.com/imgs/logo_loading.gif" height="110rpx" width="110rpx">

        </cache-image>
      </view>
    </template>
    <template #empty>
      <XtxEmpty/>
    </template>
    <template #loading>
      <view style="display: flex;flex-direction: column;align-items: center;padding-top: 120rpx;" v-if="!isRefresh">
        <cache-image style="width: 110rpx;height: 110rpx;"
                     img-src="https://lsz.lszbg.com/imgs/logo_loading.gif" height="110rpx" width="110rpx">

        </cache-image>
        <view
            style="font-size: 38rpx;font-weight: 600;color: #F97632;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
          领食周边购
        </view>
      </view>
    </template>
    <!-- 自定义的没有更多数据view -->
    <template #loadingMoreNoMore>
      <view style="font-size: 26rpx;color: #b4b4b4;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
        只显示3个月内订单数据
      </view>
    </template>
  </z-paging>
  <!-- 弹窗 驳回可提交 （不可提交） 未上传倒计时 -->
  <u-popup :show="modal_show" mode="center" :round="10" closeable @close="modal_show = false">
    <view class="o_modal">
      <Order_modal :minTime="minTime" :modal_show="modal_show" :modal_title="modal_title"
                   :comment_rule="comment_rule" :listID="listID" :order_con="order_con"
                   @handleCloseModal="modal_show = false"></Order_modal>
    </view>
  </u-popup>
  <!-- 是否可配送 -->
  <u-popup :show="showSelect" :round="10" mode="bottom" @close="showSelect = false" closeable>
    <view class="box-content">
      <view class="box-title">
        请选择进店方式
      </view>
      <view>
        <view
            class="box-item"
            v-for="(item, index) in chooseList"
            :key="index"
            @click="onChooseList(chooseList.length>2?index:index===1?2:index)"
            style="position: relative"
        >
          <View class="icon-content1">
            <u-icon
                :name="item.icon"
                size="22"
            ></u-icon>
          </View>
          <view class="box-item-content-name">
            <text>{{ item.name }}</text>
            <text v-if="index===0" class="to-shop">直接进店</text>
          </view>
          <View class="icon-content">
            <u-icon
                name="arrow-right"
                size="18"
            ></u-icon>
          </View>
          <!-- #ifdef H5 -->
          <wx-open-launch-weapp id="launch-btn" v-if="index===0" @launch="handleLaunch" @error="handleError"
                                :username="getBuToPagePath(shop.order_type == 2 || shop.order_type == 3 ? 1 : shop.type)"
                                :path="shop.order_type == 2 || shop.order_type == 3 ? shop?.wxPath  : shop.path"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
          <!-- #endif -->
        </view>
      </view>
      <view style="height: 20rpx"></view>
    </view>
  </u-popup>
  <!-- 二维码进店 -->
  <u-popup :show="showEwm" :round="20" mode="center">
    <view class="ewm-content">
      <image class="top-img" :src="shop?.order_type == 2 ? shop?.picture : shop?.logo" mode="scaleToFill"></image>
      <view class="erm-content">
        <view class="erm-content-name">
          {{ shop?.order_type == 2 ? shop?.shop_name : shop?.name }}
        </view>

        <view class="line"></view>
        <view class="erm-content-bottom">
          <view class="right">
            <view>
              长按右侧小程序二维码
            </view>
            <view style="height: 10rpx;"></view>
            <view>
              访问该店铺
            </view>
          </view>
          <view class="left">
            <image class="mini-img" :src="shop?.miniProgram_code" show-menu-by-longpress></image>
          </view>
        </view>
      </view>
      <View class="icon-content" @click="showEwm = false">
        <u-icon @click="showEwm = false"
                name="close"
                size="18"
        ></u-icon>
      </View>
    </view>
  </u-popup>
  <!-- 复制进店 -->
  <u-popup :show="showCopy" :round="10" mode="center" @close="closePop()" closeable :safeAreaInsetBottom="false">
    <view class="copy-content">
      <view class="top">
        <image class="top-img" :src="shop?.order_type == 2 || shop?.order_type == 3 ? shop?.picture : shop?.logo"
               mode="scaleToFill"></image>
        <view class="copy-content-center">
          <view class="copy-content-name">
            {{ shop?.order_type == 2 || shop?.order_type == 3 ? shop?.shop_name : shop?.name }}
          </view>
          <view class="address">
            {{ shop?.order_type == 2 || shop?.order_type == 3 ? '' : shop?.address }}
          </view>
        </view>
      </view>
      <view class="bottom1">
        <view class="desc_text1">
          店名复制成功，即将跳转去搜索，搜索下单时
          <text>请仔细核对商家名称及店铺地址和下单平台</text>
          ，
          <text>避免同名店铺</text>
          导致下错单给您带来无法获得补贴的影响。
          <text v-if="!isH5">{{ count }}s后自动跳转</text>
        </view>
        <view class="btns_con1" style="display: flex;justify-content: space-around;margin: 30rpx 0;position: relative">
          <view>
            <!-- #ifdef APP-PLUS || MP-->
            <button class="btns_box1" @click="goMeiTuanSearch()">好，去搜索下单{{ count }}s</button>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <view class="btns_box1">
              好，去搜索下单
              <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                    :username="getToPagePath(shop.order_type == 2  || shop.order_type == 3 ? 1 : shop.type)[0]"
                                    :path="getToPagePath(shop.order_type == 2  || shop.order_type == 3 ? 1 : shop.type)[1]"
                                    style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
                <component :is="'script'" type='text/wxtag-template' style="display: block;">
                  <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                </component>
              </wx-open-launch-weapp>
            </view>
            <!-- #endif -->
          </view>
        </view>
        <!-- #ifdef APP-PLUS || MP-->
        <view class="box-item" @click="onClickIsNoShow()">
          <View class="icon-content1">
            <u-icon
                v-if="isNoShow"
                name="checkmark-circle-fill"
                color="#FC754A"
                size="18"
            ></u-icon>
            <u-icon
                v-else
                name="checkmark-circle-fill"
                color="#DDDDDD"
                size="18"
            ></u-icon>
          </View>
          <view class="box-item-content-name">
            <text>下次不再提示，直接复制</text>
          </view>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </u-popup>
  <!-- 恢复订单提示 -->
  <up-popup :show="recoveryShow" mode="center" :round="10"
            :safe-area-inset-bottom="false">
    <view class="recovery_box-content">
      <view class="recovery_title">温馨提示</view>
      <view style="height: 1px;width:100%;background-color: #f4f0f0"></view>
      <view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center">
        <view class="recovery_warning">
          <image :src="BaseImgUrl + '/once/lstz/warning.png'"></image>
          <text style="margin-top: 30rpx">&nbsp;&nbsp;确定恢复此订单吗？</text>
        </view>
        <view class="recovery_content">
          <text>恢复订单只可以上传活动报名当天的外卖订单，上传非当天订单活动无效无补贴；您也知晓该活动商家要求，
            <text style="color: #FC754A">特别是第05条</text>
            ，非活动当天订单无法获得补贴。
          </text>
        </view>
      </view>
      <view style="height: 1px;background-color: #f4f0f0;margin: 0 30rpx"></view>
      <view style="display: flex;margin: 30rpx">
        <view style="flex: 1"></view>
        <view class="recovery_fq_tz" @click="recoveryShow = false">不恢复</view>
        <view style="margin-left: 20rpx"></view>
        <view class="recovery_go_buy" @click="itemResume">已知晓，恢复</view>
      </view>
    </view>
  </up-popup>
  <XtxService></XtxService>
</template>

<style lang="scss">
page {
  background-color: #F6F6F6;
}

.u-status-bar,
.u-navbar__content {
  // background-image: linear-gradient(90deg, #FDE52F, #FDE52F);
  // #ifdef H5 || APP-PLUS
  background-image: linear-gradient(90deg, #fff, #fff);
  // #endif
}

.u-count-down {
  &__text {
    color: #F97632 !important;
    font-size: 26rpx !important;
  }
}

.time {
  @include flex;
  align-items: center;

  &__custom {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;

    &__item {
      color: #F97632;
      font-size: 12px;
      text-align: center;
    }
  }

  &__doc {
    color: #F97632;
    padding: 0 2px;
  }

  &__item {
    color: #F97632;
    font-size: 15px;
    margin-right: 2px;
  }
}
::v-deep .zp-l-container {
  margin-bottom: 50px !important;
}

::v-deep .u-slot-content {
  display: block !important;
}

.o_modal {
  width: 550rpx;
}

.tabs {
  padding: 0 10rpx;
  background-color: #FFFFFF;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.notice_box {
  background-color: #FFFBEE;
  display: flex;
  box-sizing: border-box;
  padding: 10rpx 30rpx;
  margin-bottom: 20rpx;

  image {
    width: 52rpx;
    height: 52rpx;
    margin-right: 10rpx;
  }

  .desc_text {
    flex: 1;
    display: inline-block;
    font-size: 25rpx;
    color: #FC754A;
    line-height: 45rpx;
  }
}

.orderTotal {
  //height: auto;
}

.orderList {
  margin: 20rpx auto 0;
  width: 710rpx;
  background: #fff;
  padding-bottom: 10rpx;
  border-radius: 10rpx;

  &.scoreList {
    box-sizing: border-box;
    padding: 20rpx;

    .name_status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #E6E6E6;

      .name {
        font-size: 28rpx;
        color: #000;
        display: flex;
        align-items: center;

        &:before {
          content: '';
          display: inline-block;
          width: 40rpx;
          height: 40rpx;
          background: url('https://lsz.lszbg.com/imgs/old/pro_icon.png') no-repeat center center / 100% 100%;
          margin-right: 5rpx;
        }
      }

      .status {
        font-size: 28rpx;
        color: #FE5414;

        &.hui_status {
          color: #666;
        }
      }
    }

    .card_content {
      display: flex;
      box-sizing: border-box;
      padding: 30rpx 0;
      border-bottom: 1px solid #E6E6E6;

      .l_img {
        width: 160rpx;
        height: 120rpx;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .c_text {
        margin-left: 24rpx;

        .name {
          font-size: 28rpx;
          color: #333;
        }

        .jf_text {
          font-size: 24rpx;
          color: #FE5414;
          font-weight: bold;
          margin-top: 20rpx;

          text {
            font-size: 36rpx;
          }
        }
      }
    }

    .time_btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 34rpx;
      box-sizing: border-box;
      padding-bottom: 20rpx;

      .time {
        font-size: 24rpx;
        color: #999;
      }

      .r_btns {
        display: flex;
        flex: 1;
        justify-content: flex-end;

        .btn {
          height: 54rpx;
          border-radius: 6rpx;
          line-height: 54rpx;
          text-align: center;
          margin-left: 20rpx;
          font-size: 24rpx;
          box-sizing: border-box;
          padding: 0 30rpx;

          &.cancel {
            border: 1px solid #E3E3E3;
            color: #999;
          }

          &.pay {
            background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
            color: #fff;
          }
        }
      }
    }
  }
}

.listLeft {
  display: flex;
  align-items: center;
  flex: 1;
}


.elemtag {
  background-color: #17aeff;
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 24rpx;
  text-align: center;
  padding: 2rpx 10rpx;
  margin-right: 10rpx;
  flex: 1;
}

.listTitile {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listTitile text {
  font-size: 30rpx;
  color: #111111;
  font-weight: bold;
}

.listTitile image {
  width: 11rpx;
  height: 22rpx;
}

.listRight {
  .time_d {
    font-size: 26rpx;
    color: #FF3819;
    font-weight: bold;
  }
}

.listOrder {
  margin: 0 auto;
}

/* content */
.content {
  width: 100%;
  height: 163rpx;
}

.content_header {
  float: left;
  margin: 21rpx 17rpx 0 0;
  overflow: hidden;
  width: 120rpx;
  height: 120rpx;
  border: 1rpx solid #eee;
  border-radius: 20rpx;
}

.content_header image {
  width: 120rpx;
  height: 120rpx;
}

.content_time {
  display: inline-block;
}

.content_time text:first-child {
  margin-top: 26rpx;
  font-size: 24rpx;
  color: #111111;
}

.content_time text {
  line-height: 40rpx;
  display: block;
  font-size: 24rpx;
  color: #111111;
}

/* bottom */

.pingjia {
  font-size: 24rpx;
  color: #555;
  line-height: 40rpx;
}

.pingjia > view {
  font-size: 24rpx;
  font-weight: bold;
  color: #111111;
}

.pingjia > view:nth-child(2) {
  color: #666666;
}

.pingjia_box {
  width: 100%;
  //height: auto;
  background-color: #F7F8FA;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 20rpx;
}

.bohui_bg {
  background-color: #FDEBE4;
  margin-top: 20rpx;
}

.bohui_bg view {
  color: #2194FF;
}

.box-content {
  background: #F8F8F8;
  border-radius: 20rpx 20rpx 0 0;

  .box-title {
    width: 100%;
    height: 130rpx;
    line-height: 130rpx;
    align-items: center;
    text-align: center;
    font-size: 32rpx;
  }

  .box-item {
    display: flex;
    font-size: 32rpx;
    height: 120rpx;
    line-height: 120rpx;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    text-align: center;
    margin: 0 30rpx 30rpx 30rpx;
  }

  .box-item-content-name {
    flex: 1;
    text-align: left;
  }

  .to-shop {
    background: #FC4106;
    color: white;
    border-radius: 5rpx;
    font-size: 22rpx;
    margin-left: 10rpx;
    padding: 2rpx 6rpx;
  }

  .icon-content1 {
    border-radius: 50%;
    padding: 10rpx;
    margin: 0 30rpx 0 30rpx;
    background: #F8F8F8;
  }

  .icon-content {
    margin: 0 20rpx;
  }
}

.ewm-content {
  margin-top: -460rpx;
  width: 600rpx;
  height: 200rpx;
  border-radius: 20rpx 20rpx 0 0;
  background: white;

  .top-img {
    width: 600rpx;
    height: 600rpx;
    border-radius: 20rpx 20rpx 0 0;
  }

  .erm-content {
    background: white;
    border-radius: 0 0 20rpx 20rpx;

    .erm-content-name {
      background: white;
      padding: 30rpx;
      font-size: 32rpx;
      font-weight: bold;
    }

    .line {
      width: 200rpx;
      background: black;
      height: 2rpx;
      margin: 0 30rpx;
    }

    .erm-content-bottom {
      display: flex;
      font-weight: 600;
      font-size: 28rpx;
      padding: 30rpx;
      align-items: center;

      .right {
        flex: 1;
      }

      .left {
        image {
          width: 180rpx;
          height: 180rpx;
          background: #f8f8f8;
          border-radius: 50%;
        }
      }
    }
  }

  .icon-content {
    text-align: center;
    width: 68rpx;
    padding: 16rpx;
    margin: 50rpx auto auto;
    background: #f2f2f2;
    border-radius: 60rpx;
  }
}

.copy-content {
  width: 600rpx;
  border-radius: 20rpx;
  background: white;
  text-align: center;

  .bottom1 {
    .btns_box1 {
      width: 540rpx;
      height: 80rpx;
      background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
      border-radius: 50rpx;
      font-size: 26rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }

    .box-item {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      width: 370rpx;
      margin: 0 auto 38rpx;
      color: #B1B1B1;
      border-radius: 16rpx;
      text-align: center;

      .icon-content1 {
        border-radius: 50%;
        padding: 6rpx;
        background: #F8F8F8;
      }

      .box-item-content-name {
        margin-left: 10rpx;
      }
    }
  }

  .top {
    background: #f8f8f8;
    border-radius: 20rpx;
    padding: 0 30rpx 30rpx;
  }

  .top-img {
    height: 200rpx;
    width: 200rpx;
    margin: 60rpx auto auto;
    border-radius: 30rpx;
  }

  .address {
    color: #888888;
    margin-top: 20rpx;
    font-size: 26rpx;
  }

  .copy-content-center {
    .copy-content-name {
      padding: 30rpx 0 20rpx;
      font-size: 32rpx;
      font-weight: 600;
    }

    .vip-content {
      text-align: center;

      .vip_text {
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
        margin-right: 26rpx;

        text {
          color: #FE874B;
        }
      }
    }

  }

}

.desc_text1 {
  box-sizing: border-box;
  padding: 30rpx 30rpx 0;
  font-size: 30rpx;
  color: #AAAAAA;
  line-height: 56rpx;
  text-align: left;

  text {
    color: #F97632;
    text-align: left;
  }
}

.recovery_box-content {
  display: flex;
  flex-direction: column;
  width: 600rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  letter-spacing: 3rpx;

  .recovery_title {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 32rpx;
    text-align: center;
    padding: 28rpx 0;
  }

  .recovery_warning {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 20rpx;
    width: 100%;

    image {
      width: 76rpx;
      height: 76rpx;
    }

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #FF5621;
      line-height: 36rpx;
    }
  }

  .recovery_content {
    margin: 30rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 56rpx;
  }

  .recovery_fq_tz {
    width: 160rpx;
    height: 64rpx;
    background: #FFFFFF;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    border: 2rpx solid #E5E5E5;
    text-align: center;
    line-height: 64rpx;
    color: #888888;
    font-size: 26rpx
  }

  .recovery_go_buy {
    width: 220rpx;
    height: 64rpx;
    background: linear-gradient(270deg, #FC754A 0%, #FDBA37 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    text-align: center;
    line-height: 64rpx;
    color: #FFFFFF;
    font-size: 26rpx
  }

}
</style>
